<template>
    <div class="module-box">
        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 左侧导航按钮 -->
            <div class="nav-buttons">
                <div v-for="(nav, index) in navs" :key="index" class="nav-btn"
                    :class="{ active: currentIndex === index }" @click="handleClick(index)">
                    {{ nav }}
                </div>
            </div>
            <!-- 中间文本内容 -->
            <div class="text-content">
                <ul>
                    <li v-for="(text, i) in currentContent.texts" :key="i">
                        <span class="dot"></span>
                        {{ text }}
                    </li>
                </ul>
            </div>
            <!-- 右侧图片（有几张展示几张，无需切换） -->
            <div class="image-content">
                <!-- 循环遍历图片数组，有几张渲染几张 -->
                <img v-for="(img, idx) in currentContent.images" :key="idx" :src="img" alt="模块图片" class="module-image">
            </div>
        </div>
        <!-- 模块标题 -->
        <div class="module-title">{{ title }}</div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 接收父组件参数
const props = defineProps({
    title: { type: String, required: true },
    navs: { type: Array, required: true }, // 导航按钮文本数组
    contents: { type: Array, required: true } // 对应导航的内容数组（与navs索引对应）
});

// 响应式状态
const currentIndex = ref(0); // 当前激活的页面索引
let timer = null; // 自动切换定时器

// 当前显示的内容（根据currentIndex计算）
const currentContent = computed(() => {
    return props.contents[currentIndex.value] || { texts: [], images: [] };
});

// 点击导航按钮切换页面
const handleClick = (index) => {
    currentIndex.value = index;
    resetTimer(); // 点击后重置定时器，避免立即自动切换
};

// 自动切换到下一页
const autoNextPage = () => {
    currentIndex.value = (currentIndex.value + 1) % props.navs.length;
};

// 重置定时器（5秒切换一次）
const resetTimer = () => {
    clearInterval(timer);
    timer = setInterval(autoNextPage, 5000);
};

// 组件挂载时启动定时器
onMounted(() => {
    resetTimer();
});

// 组件卸载时清除定时器
onUnmounted(() => {
    clearInterval(timer);
});
</script>

<style scoped>
.module-box {
    padding: 15px;
    width: 950px;
    height: 466px;
    background-image: url("/imgs/wuhan/矩形 933 拷贝 3.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.module-title {
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    width: auto;
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 33px;
    color: #FFFFFF;
    line-height: 46px;
}

.content-wrapper {
    display: flex;
    gap: 80px;
    height: 350px;
}

/* 左侧导航按钮 */
.nav-buttons {
    cursor: pointer;
    justify-content: center;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-btn {
    padding: 12px 10px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    background-image: url("/imgs/wuhan/矩形 1269(1).png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 237px;
    height: 83px;
    font-family: "微软雅黑粗体";
    font-weight: bold;
    font-size: 25px;
    color: #FFFFFF;
    line-height: 39px;

}

.nav-btn.active {
    font-weight: bold;
    background-image: url("/imgs/wuhan/矩形 1269.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 237px;
    height: 83px;
}

/* 中间文本内容 */
.text-content {
    /* flex: 1; */
    color: #e6e6e6;
    align-content: center;
    padding: 10px;
    background-image: url("/imgs/wuhan/矩形 933 拷贝 7.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 359px;
    height: 366px;
    border-radius: 4px;
    overflow: auto;
}

.text-content ul {
    list-style: none;
    padding-left: 10px;
}

.text-content li {
    margin: 12px 0;
    width: 280px;
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 25px;
    color: #FFFFFF;
}

.dot {
    display: inline-block;
    background-image: url("/imgs/wuhan/组 7798 拷贝 6.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 21px;
    height: 21px;
    margin-right: 8px;
}

/* 右侧图片 */
.image-content {
    position: relative;
    /* top: 50px; */
    left: -40px;
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 10px;
    /* flex-wrap: wrap; */
    flex-direction: column;
    gap: 30px;
}

.module-image {
    width: 279px;
    height: 176px;
    object-fit: contain;
    border-radius: 4px;
}
</style>